<template>
  <view class="container">
    <!-- 订单信息展示区域 -->
    <view v-for="(order, index) in pendingOrders" :key="index" class="shop-item">
      <view class="order">
        <image :src="order.images" mode="aspectFill" class="shop-img" />
        <view class="shop-text">
          <view>订单ID: {{ order.orderId }}</view>
          <view>订单名称: {{ order.orderName }}</view>
         <view>X {{order.orderCount}}</view>
        </view>
      </view>
      <view class="shop-price">
        <view>￥{{ (order.orderPrice * order.orderCount).toFixed(2) }}</view>
      </view>
      <button class="buy" @click="appraise(order)"> 去评价 </button>
    </view>
    <view v-if="pendingOrders.length === 0" class="shop-else-list">
      暂无
    </view>
  </view>
</template>


<script>
import config from '@/config.js'

export default {
  data() {
    return {
      pendingOrders: [] // 用于存储订单信息列表的对象
    }
  },
  methods: {
    // appraise(order) {
    //   console.log("评价按钮被点击");
    //   // 发送请求到后端，尝试更新订单状态
    //   uni.request({
    //     url: `${config.apiUrl}/order/buy/${goorderod.orderId}`, // 确保这里的 API URL 是正确的
    //     method: 'POST', // 使用 POST 方法来发送请求
    //     header: {
    //       'Content-Type': 'application/x-www-form-urlencoded' // 根据服务器端期望的请求类型设置
    //     },
    //     data: `state=4`, // 将订单状态设置为'4'，并转换为表单编码格式
    //     success: (response) => {
    //       if (response.data) {
    //         uni.showToast({
    //           title: '成功评价订单',
    //           icon: 'success'
    //         });
    //         // 更新订单列表
    //         this.fetchorderByState();
    //       } else {
    //         uni.showToast({
    //           title: '评价订单失败',
    //           icon: 'none'
    //         });
    //       }
    //     },
    //     fail: (error) => {
    //       // 处理请求失败的情况
    //       console.error('评价订单请求失败', error);
    //       uni.showToast({
    //         title: '请求失败，请重试',
    //         icon: 'none'
    //       });
    //     }
    //   });
    // },
	 appraise(order) {
		 console.log("去评价按钮被点击！！");
		    // 跳转到 appraise 页面并传递 orderId
		    uni.navigateTo({
		      url: `/pages/mine/order/appraise?orderId=${order.orderId}`
		    });
	 },
    fetchorderByState() {
      // 发送请求到后端获取状态为3的订单列表
      uni.request({
        url: `${config.apiUrl}/order/state/3`,
        method: 'GET',
        success: (response) => {
          if (response.data && response.data.length > 0) {
            this.pendingOrders = response.data;
          } else {
            uni.showToast({
              title: '没有找到状态为3的订单',
              icon: 'none'
            });
          }
        },
        fail: (error) => {
          console.error('获取订单信息请求失败', error);
          uni.showToast({
            title: '请求失败，请重试',
            icon: 'none'
          });
        }
      });
    }
  },
  // 在组件创建时获取订单列表
  created() {
    this.fetchorderByState();
  }
}

</script>


<style>
.container {
  padding-bottom: 100rpx;
  background-color: #ffffff;
  height: 100%;
}

.shop-else-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 18rpx;
}

.shop-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  background-color: #f5f5f5;
  margin: 20rpx 0;
  border-radius: 15rpx;
}

.order {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15rpx;
}

.shop-img {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}

.shop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.shop-price {
  text-align: right;
}

.buy {
  margin-top: 15rpx;
  align-self: flex-start;
  padding: 10rpx 25rpx;
  border: 1px solid #ff5400;
  background-color: #fff;
  color: #ff5400;
  border-radius: 5rpx;
  font-size: 16rpx;
  cursor: pointer;
}

</style>
